<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            Vue提供了修饰符来帮助处理一些事件
                .stop - 调用 event.stopPropagation()
                .prevent - 调用 event.preventDefault()
                .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
                .native - 监听组件根元素的原生事件
                .once - 只触发一次回调
         -->
         <!-- .stop阻止事件冒泡 -->
         <div @click="divClick">
             苏州大学
            <button @click.stop="btnClick">按钮</button>
         </div>

         <!-- .prevent阻止默认事件 -->
         <form action="baidu">
             <input type="submit" value="提交" @click.prevent="submitClick">
         </form>

         <!-- 监听某个键盘按键的点击 -->
         <!-- @keyup则监听所有按钮的点击动作,如果加上 .enter 则只监听enter按键 -->
         <input type="text" @keyup.enter="keyUp">

        <!-- .once只触发一次回调,即使多次点击也只触发一次 -->
        <button @click.once="btn">按钮</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                btnClick(){
                    console.log("btnClick")
                },
                divClick(){
                    console.log("divClick")
                },
                submitClick(){
                    console.log("提交")
                },
                keyUp(){
                    console.log("键盘事件")
                },
                btn(){
                    console.log(">>>")
                }
            }
        })
    </script>
</body>
</html>